<template>
  <div class="title">物流管理</div>
  <div class="container">
    <el-table :data="usergoodslist" border style="width: 63.5%">
      <el-table-column prop="shopping_id" label="id" width="70" />
      <el-table-column prop="user_name" label="收货人" width="180" />
      <el-table-column prop="shop_name" label="商品名" width="250" />
      <el-table-column prop="shop_price" label="商品价格" width="100" />
      <el-table-column prop="shopping_status" label="商品状态" width="150">
        <template #default="scope">
          <p v-if="scope.row.shopping_status === 0">待发货</p>
          <p v-if="scope.row.shopping_status === 1">已发货</p>
          <p v-if="scope.row.shopping_status === 2">待签收</p>
          <p v-if="scope.row.shopping_status === 3">已签收</p>
        </template>
      </el-table-column>
      <el-table-column label="更改状态" width="320">
        <template #default="scope">
          <el-button type="info" circle @click="changeStatus1(scope.$index)">待发货</el-button>
          <el-button type="primary" circle @click="changeStatus2(scope.$index)">已发货</el-button>
          <el-button type="danger" circle @click="changeStatus3(scope.$index)">待签收</el-button>
          <el-button type="success" circle @click="changeStatus4(scope.$index)">已签收</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      usergoodslist:[]
    }
  },
  created() {
    this.getUserGoodsList()
  },
  methods: {
    async getUserGoodsList() {
      const res = await this.$api.shop.getUserGoodsList()
      const { data:{ data:usergoodslist } } = res
      this.usergoodslist = [
        ...usergoodslist
      ]
      console.log(this.usergoodslist,'-----usergoodslist')
    },
    changeStatus1(index) {
      this.usergoodslist[index].shopping_status = 0
      console.log(this.usergoodslist[index].shopping_status,'----index')
      const data1 = { 'shopping_status':this.usergoodslist[index].shopping_status,'shopping_id':this.usergoodslist[index].shopping_id }
      this.changeGoodsStatus(data1)
    },
    changeStatus2(index) {
      this.usergoodslist[index].shopping_status = 1
      const data2 = { 'shopping_status':this.usergoodslist[index].shopping_status,'shopping_id':this.usergoodslist[index].shopping_id }
      this.changeGoodsStatus(data2)
    },
    changeStatus3(index) {
      this.usergoodslist[index].shopping_status = 2
      const data3 = { 'shopping_status':this.usergoodslist[index].shopping_status,'shopping_id':this.usergoodslist[index].shopping_id }
      this.changeGoodsStatus(data3)
    },
    changeStatus4(index) {
      this.usergoodslist[index].shopping_status = 3
      const data4 = { 'shopping_status':this.usergoodslist[index].shopping_status,'shopping_id':this.usergoodslist[index].shopping_id }
      this.changeGoodsStatus(data4)
    },
    async changeGoodsStatus(data) {
      console.log(data,'----data')
      const res = await this.$api.shop.changeGoodsStatus(data)
      if(res.data.status !== 0) {
        alert('更改状态失败!')
      } else {
        alert('更改状态成功!')
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.title {
  margin-bottom: 50px;
}
</style>
